<template>
  <div class="basic-layout">
    <div :class="['nav', isCollapse ? 'fold' : 'unfold']"   ref="navmenuwin"> 
      <!-- 导航菜单 -->
      <el-menu
        :default-active="activeMenu"
        class="nav-menu"
     
        :router="true"
      
        :collapse="isCollapse"
          
      >
        <tree-menu :menuTree="menuTree" />
      </el-menu>
    </div>

    <div :class="['content', isCollapse ? 'fold' : 'unfold']">
      <div class="top-crumb">
    
        <div class="user-info"> 
      <el-form ref="form" :inline="true" :model="queryForm">
        <el-form-item label="url" prop="title">
          <el-input placeholder="请输入菜单名称" />
        </el-form-item>
   
        <el-form-item label="token" prop="title">
          <el-input placeholder="请输入菜单名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getMenuList">查询</el-button>
          <el-button @click="handleReset('form')">重置</el-button>
        </el-form-item>
      </el-form> 
        </div>
      </div>
      <div class="wrapper">
          接口名称
          接口请求方式
          点击测试
          接口路径
          头部标签
          请求内容
          返回结果
          返回示例

      </div>
    </div>
  </div>
</template>

<script>

import utils from "../../utils/utils";
import TreeMenu from "./../../components/TreeMenu.vue";
 
  
export default {
  name: "home",
  components: { TreeMenu},
  data() {
    return {

      activeMenu: location.hash.slice(1),
      isCollapse: false,
      site: {},
      menuTree: [],
      userInfo: {},
      noticeCount: 0, 
      isFullScreen:false,
    };
  },
    	watch:{
			//监视路由,一开始就监视,获取routeName,来判断是否激活
            $route:{
                immediate:true,
                handler(val){
                    // this.routeName=val.name
                    console.log( val);
                    this.activeMenu=val.name;
                     
                }
            }
      },
  mounted() {
    this.getNoticeCount();
    this.getMenuList();
  },
  methods: {
    toggleNav() {
      this.isCollapse = !this.isCollapse;
      setTimeout(() => {
      let navmenuwin = this.$refs.navmenuwin.offsetWidth;
        let left=(navmenuwin+20);
          console.log(left,navmenuwin)
          this.$refs.tagsviewdiv.style.left = left+"px"
      }, 200);
      
      //  let navmenuwin = this.$refs.navmenuwin.offsetWidth;
      //  let left=(navmenuwin+70);
      //   console.log(left,navmenuwin)
      //    this.$refs.tagsviewdiv.style.left = left+"px"

    },
     
    handleCommand(key) {
      if (key === "logout") {
        this.$message.success("已退出登录");
        this.$storage.clearAll();
        this.$store.commit("saveUserInfo", ""); //清空用户信息
        this.$store.commit("changeMenuList", ""); //清空菜单列表 
        this.userInfo = {};
        this.$router.push("/login");
      } else if (key === "user") {
        this.$router.push("/profile");
      }
    },
    async getNoticeCount() {
      // console.log(utils.getStorage("tagsview"),"标签" )
        //  this.$store.commit("cleartagsview","")
      // const res = await this.$api.noticeCount()
      // this.noticeCount = res
      this.noticeCount = 5;
    },
    async getMenuList() {
      if (this.menuTree.length === 0) {
        try {
          const res = await this.$api.getMenuList(); 
          this.userInfo = res.getUserinfo;
          this.menuTree = res.menu;
          this.site = res.config;
          this.$store.commit("pushtags","")
        
          // this.$store.commit('changeMenuList',res.data.menu)
        } catch (error) {
          console.error(error);
        }
      }
    },
    // 换肤
    handletheme(key){
// alert(key)
      utils.setStorage("theme",key)
      document.getElementById("app").setAttribute("class",key);
    },

    // 全屏
  fullscreen() {
    var docElm = document.documentElement;
    if (docElm.requestFullscreen) {
        docElm.requestFullscreen();
    } else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
    } else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
    } else if (docElm.msRequestFullscreen) {
        docElm.msRequestFullscreen();
    }
     this.isFullScreen=true;
},

// 退出全屏
  exitFullscreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
    
     this.isFullScreen=false;
}


  },
};
</script>

<style lang="scss" scoped>
.router-link-active {
         background-color:#3498DB;
         color: white;
       }
.el-icon-full-screen{
  display: none;
}
.basic-layout {
  position: relative;

  .nav {
    position: fixed;
    width: 200px;
    height: 100vh;
   /* background-color: #001529;
    color: white;*/
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.3s; // 收缩展开过渡动画

    .logo {
      display: flex;
      align-items: center;
      font-size: 18px;
      height: 50px;

      img {
        margin: 0 16px;
        width: 32px;
        height: 32px;
      }
    }

    .nav-menu {
      height: calc(100vh - 50px);
      border-right: none;
    }

    &.fold {
      width: 64px;
    }
    &.unfold {
      width: 200px;
    }
  }

  .content {
    margin-left: 200px;

    &.fold {
      margin-left: 64px;
    }
    &.unfold {
      margin-left: 200px;
    }

    .top-crumb {
      height: 50px;
      line-height: 50px;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ddd;
      padding: 0 20px;

      .top-crumb-left {
        display: flex;
        align-items: center;
        .fold-menu {
          cursor: pointer;
        }
        .bread {
          margin-left: 10px;
        }
      }

      .user-info {
        .notice {
          margin-right: 20px;
          line-height: 25px;
        }

        .username-span {
          cursor: pointer;
          
        }
      }
    }

    .wrapper {
      background: #eef0f3;
      padding: 20px;
      height: calc(100vh - 50px);
      .main {
        background-color: #fff;
        height: 100%;
      }
    }
  }
}
</style>
